<template>
  <view>
    <tn-button id="print_btn" @click="cusRenderDom" class="btn">打印</tn-button>

    <sp-html2pdf-render
        domId="render-dom"
        ref="renderRef"
        @beforeSavePDF="beforeSavePDF"
        @renderOver="renderOver"
        :auto-open="false"
    ></sp-html2pdf-render>
    <view id="render-dom">
      <view class="main">
        <view class="title">
          <view>卷内目录</view>
        </view>
        <table cellspacing="0">
          <tr>
            <td>序号</td>
            <td>题名</td>
            <td>制作者</td>
            <td>制作日期</td>
            <td>页码</td>
            <td>备注</td>
          </tr>
          <tr v-for="(item, index) in jsonData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.author }}</td>
            <td>{{ item.makeTimel || item.makeTime }}</td>
            <td>{{ item.pageNo }}</td>
            <td>{{ item.remark }}</td>
          </tr>
        </table>
      </view>
    </view>
  </view>
</template>
<script>
import {base64ToPath} from "@/uni_modules/sp-html2pdf-render/utils";
import {uploadLp, uploadLpPdf} from "@/api/lupeiwenshu";
import {base64ToFile} from "@/utils/typeConversion";

export default {
  props: ['jsonData'],
  data() {
    return {
      reviewBaseImg: '',
      webImageBase: '',
      locImageBase: ''
    };
  },
  methods: {
    cusRenderDom() {
      this.$refs.renderRef.h2pRenderDom()
    },
    renderOver(e) {
      // e为导出的图片（base64）
      // console.log('e', e);
      const file = base64ToFile(e, 'fjtp', 'png');
      console.log(file)
      base64ToPath(e).then(path => {
        uploadLp({
          filePath: e
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })

      })
    },
    beforeSavePDF(e) {
      // e为导出的pdf（base64）
      // console.log('==== beforeSavePDF :', e);
      return;
      const file = base64ToFile(e, 'jzjp021212.pdf', 'pdf');
      base64ToPath(e).then(path => {
        // this.$emit('upload', {
        //   ...{
        //     code: 0,
        //     data: {
        //       url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
        //     }
        //   },
        //   path
        // })
        // return
        uploadLpPdf({
          file,
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })
      })

    },
  }
};
</script>
<style scoped lang="scss">
#render-dom {
  width: 794px;
  height: 1123px;
  padding: 0px 77px 0;

  .main {
    margin: 0 auto;
    font-family: "宋体";
  }

  .title {
    line-height: 140px;
    font-weight: bold;
    text-align: center;
    font-size: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;

  }

  table {
    text-align: center;
    font-size: 16px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;

    tr {
      td {
        border-left: 1px solid #000000;
        border-top: 1px solid #000000;
        padding: 7px 5px;
      }

      td:nth-child(1) {
        width: 32px;
      }

      td:nth-child(3) {
        width: 140px;
      }

      td:nth-child(4) {
        width: 160px;
      }

      td:nth-child(5) {
        width: 32px;
      }

      td:nth-child(6) {
        width: 80px;
      }
    }
  }
}

</style>
